<template>
  <div class="common-wrapper">
    <!--title part-->
    <div v-if='!option.hideTittle' class='common-title'>数据字典</div>
    <div class='common-main'>
      <!--search part-->
      <el-form ref='searchForm' class='common-search' size='small' :model='search' :inline='true' label-position='left'>
         <el-form-item v-for='item in searchList' :key='item.prop'  :prop='item.prop' :label-width='(item.searchWidth || option.width  || 85) +"px"' :label="item.label+'：'">
            <el-input v-model="search[item.prop]" :placeholder='"请输入" + item.label'/>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' size='small' @click='searchChange'>搜索</el-button>
            <el-button plain size='small' @click='searchClear'>清空</el-button>
          </el-form-item>
      </el-form>
      <slot name='action'></slot>
      <!--table part-->
      <div class='common-table'>
        <el-table
          ref="table"
          :data="data"
          v-loading='tloading'
          row-key ='id'
          @selection-change = 'selectionChange'
          style="width: 100%">
          <el-table-column :reserve-selection = 'true' type="selection" width="50" align="center" v-if='option.selection' />
          <el-table-column type="index" width="40" label='#' />
          <el-table-column
            v-for="(item, index) in column"
            :key="item.prop || index"
            :prop="item.prop"
            :min-width="item.width"
            :label="item.label" />
          <el-table-column header-align="center" width="120px" align="center" v-if='option.menu'>
            <template slot="header" slot-scope="scope">操作</template>
            <template slot-scope="scope">
              <slot name='menu' :row="scope.row">
                <el-button v-if='option.delBtn' type="text" icon="el-icon-delete" class="danger" size="mini">删除</el-button>
              </slot>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="common-pagination right" v-if='page.total'>
        <el-pagination
          background
          @current-change="currentChange"
          @size-change="sizeChange"
          :current-page.sync="page.current"
          :page-size.sync="page.size"
          layout="sizes, prev, pager, next"
          :total="page.total" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tloading: false,
        searchList: []
      };
    },
    props: {
      option: {
        type: Object,
        default: () => {
          return {}
        }
      },
      search: {
        type: Object,
        default: () => {
          return {}
        }
      },
      data: {
        type: Array,
        default: []
      },
      page: {
        type: Object,
        default: () => {
          return {
            total: 0,
            size: 10,
            current: 1
          }
        }
      }
    },
    created () {
      let column = []
      if (this.option.column instanceof Array) {
        column = this.option.column.filter(item => {
          if (item.search) {
            this.$set(this.search, item.prop, '')
          }
          return item.search
        })
      }
      this.searchList = column;
    },
    computed: {
      column () {
        if (this.option.column instanceof Array) {
          return this.option.column
        } else {
          return []
        }
      }
    },
    methods: {
      selectionChange (selection) {
        this.$emit('selectionChange', selection);
      },
      clearSelection () {
        this.$refs.table.clearSelection();
      },
      searchChange () {
        console.log('search')
        this.onLoad()
      },
      searchClear () {
        console.log('clear');
        this.$refs.searchForm.resetFields();
      },
      onLoad () {
        let query = Object.assign({}, this.search);
        query.page = this.page.current - 1;
        query.size = this.page.size;
        this.tloading = true;
        this.axios({
          url: this.option.queryUrl,
          method: this.option.method || 'post',
          data: query
        }).then(res => {
          this.tloading = false;
          if (res.code==1) {
            this.$emit('update:data', res.data.dataList);
            this.page.total = res.data.total;
          }
        })
      },
      currentChange(current) {
        this.page.current = current;
        this.onLoad();
      },
      sizeChange(size) {
        this.page.size = size;
        this.page.current = 1;
        this.onLoad();
      }
    }
  }
</script>
